<template>
  <el-form ref="formRef" class="SearchBar" :model="form" inline>
    <!-- 动态表单项 -->
    <template v-for="item in searchItems" :key="item.prop">
      <el-form-item :label="item.label" :prop="item.prop">
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="form[item.prop]"
          :style="`width: ${item.width ? item.width : 200}px`"
          :placeholder="item.placeholder || `请输入${item.label}`"
          :clearable="item.hasOwnProperty('clearable') ? item.clearable : true"
        />
        <!-- 选择器 -->
        <el-select
          v-else-if="item.type === 'select'"
          v-model="form[item.prop]"
          :style="`width: ${item.width ? item.width : 200}px`"
          :placeholder="item.placeholder || `请选择${item.label}`"
          :clearable="item.hasOwnProperty('clearable') ? item.clearable : true"
        >
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <!-- 日期选择器 -->
        <el-date-picker
          v-else-if="item.type === 'date'"
          v-model="form[item.prop]"
          :style="`width: ${item.width ? item.width : 200}px`"
          type="date"
          :clearable="item.hasOwnProperty('clearable') ? item.clearable : true"
          :placeholder="item.placeholder || `请选择${item.label}`"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
        <el-date-picker
          v-else-if="item.type === 'daterange'"
          v-model="form[item.prop]"
          :style="`width: ${item.width ? item.width : 250}px`"
          type="daterange"
          unlink-panels
          :clearable="item.hasOwnProperty('clearable') ? item.clearable : true"
          range-separator="~"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :disabled-date="item.disabledDate || undefined"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="changeDaterange($event, item)"
        />
      </el-form-item>
    </template>
    <!-- 操作按钮 -->
    <el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";
import { removeFields } from "@/utils";

// 定义表单项的类型
export interface SearchItem {
  prop: string; // 字段名
  label: string; // 标签
  type: "input" | "select" | "date" | "daterange"; // 表单项类型
  clearable?: boolean; // 是否允许清空
  placeholder?: string; // 占位符
  width?: number; // 宽度
  startTime?: string; // 开始时间
  endTime?: string; // 结束时间
  disabledDate?: (time: Date) => boolean; // 日期选择范围
  options?: { label: string; value: string | number }[]; // 选择器的选项
}

// 定义组件的 Props
const props = defineProps({
  searchItems: {
    type: Array as PropType<SearchItem[]>,
    required: true,
  },
  initialValues: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({}),
  },
});

// 定义事件
const emit = defineEmits(["search", "reset"]);

// 表单实例
const formRef = ref<FormInstance>();

// 表单数据
const form = reactive<Record<string, any>>({ ...props.initialValues });

// 处理搜索
const handleSearch = () => {
  emit("search", form);
};
// 处理搜索
const changeDaterange = (dates: string[] | null, item: SearchItem) => {
  if (dates && dates.length > 0) {
    form[item.startTime as string] = dates[0];
    form[item.endTime as string] = dates[1];
  }
};

// 处理重置
const handleReset = () => {
  Object.keys(form).forEach((key) => {
    form[key] = props.initialValues[key] || "";
  });
  emit("reset");
};
</script>

<style scoped></style>
